<template v-if="currentIndex == 3">
  <view class="order_box box mb_33">
    <view class="all_box bc_fff br_4 mt_12">
      <view class="order_header box height_40" @click="bindOrder(0)">
        <view class="header_left">
          <image
            :src="ossUrl + '/order_icon.png'"
            class="width_20 height_20"
            mode=""
          ></image>
          <view class="ml_7 fz_16 fb"> 全部订单 </view>
        </view>
        <view class="header_right fz_16 fb">
          {{ orderData.all || 0 }}
          <u-icon class="ml_8" name="arrow-right" color="#999999"></u-icon>
        </view>
      </view>
      <view class="list_box box">
        <view
          class="single_list box width_104 height_59 br_4 mb_8 ml_8"
          @click="bindOrder(2)"
        >
          <view class="single_header">
            待确认
            <u-icon class="ml_8" name="arrow-right" color="#999999"></u-icon>
          </view>
          <view
            :class="
              userType == 1
                ? 'fz_16 fb mt_4 blue_text'
                : 'fz_16 fb mt_4 red_text'
            "
          >
            {{ orderData.toBeConfirm || 0 }}
          </view>
        </view>
        <view
          class="single_list box width_104 height_59 br_4 mb_8 ml_8"
          @click="bindOrder(5)"
        >
          <view class="single_header">
            待支付
            <u-icon class="ml_8" name="arrow-right" color="#999999"></u-icon>
          </view>
          <view
            :class="
              userType == 1
                ? 'fz_16 fb mt_4 blue_text'
                : 'fz_16 fb mt_4 red_text'
            "
          >
            {{ orderData.toBePaid || 0 }}
          </view>
        </view>
        <view
          class="single_list box width_104 height_59 br_4 mb_8 ml_8"
          @click="bindOrder(6)"
        >
          <view class="single_header">
            待确认收款
            <u-icon class="ml_8" name="arrow-right" color="#999999"></u-icon>
          </view>
          <view
            :class="
              userType == 1
                ? 'fz_16 fb mt_4 blue_text'
                : 'fz_16 fb mt_4 red_text'
            "
          >
            {{ orderData.paymentToBeConfirmed || 0 }}
          </view>
        </view>
        <view
          class="single_list box width_104 height_59 br_4 mb_8 ml_8"
          @click="bindOrder(7)"
        >
          <view class="single_header">
            备货中
            <u-icon class="ml_8" name="arrow-right" color="#999999"></u-icon>
          </view>
          <view class="fz_16 fb mt_4">
            {{ orderData.inStock || 0 }}
          </view>
        </view>
        <view
          class="single_list box width_104 height_59 br_4 mb_8 ml_8"
          @click="bindOrder(10)"
        >
          <view class="single_header">
            待收货
            <u-icon class="ml_8" name="arrow-right" color="#999999"></u-icon>
          </view>
          <view class="fz_16 fb mt_4">
            {{ orderData.goodsToBeReceived || 0 }}
          </view>
        </view>
        <view
          class="single_list box width_104 height_59 br_4 mb_8 ml_8"
          @click="bindOrder(11)"
        >
          <view class="single_header">
            待安装
            <u-icon class="ml_8" name="arrow-right" color="#999999"></u-icon>
          </view>
          <view class="fz_16 fb mt_4">
            {{ orderData.toBeInstalled || 0 }}
          </view>
        </view>
        <view
          class="single_list box width_104 height_59 br_4 mb_8 ml_8"
          @click="bindOrder(9)"
        >
          <view class="single_header">
            待确认尾款
            <u-icon class="ml_8" name="arrow-right" color="#999999"></u-icon>
          </view>
          <view
            :class="
              userType == 1
                ? 'fz_16 fb mt_4 blue_text'
                : 'fz_16 fb mt_4 red_text'
            "
          >
            {{ orderData.balanceToBeConfirmed || 0 }}
          </view>
        </view>
        <view
          class="single_list box width_104 height_59 br_4 mb_8 ml_8"
          @click="bindOrder(13)"
        >
          <view class="single_header">
            已取消
            <u-icon class="ml_8" name="arrow-right" color="#999999"></u-icon>
          </view>
          <view class="fz_16 fb mt_4">
            {{ orderData.canceled || 0 }}
          </view>
        </view>
        <view
          class="single_list box width_104 height_59 br_4 mb_8 ml_8"
          @click="bindOrder(100)"
        >
          <view class="single_header">
            售后
            <u-icon class="ml_8" name="arrow-right" color="#999999"></u-icon>
          </view>
          <view class="fz_16 fb mt_4">
            {{ orderData.afterSales || 0 }}
          </view>
        </view>
      </view>
    </view>
    <!-- <view class="time_box height_44 bc_fff br_8 mt_12">
			<view class="fz_16 fb fc_333">
				今日
			</view>
			<u-icon name="arrow-right" color="#666666"></u-icon>
		</view> -->
    <DateType
      :pickerValue="pickerValue"
      @updatePickerValue="updatePickerValue"
    />
    <view class="data_box box br_8 mt_12">
      <view
        :class="
          userType == 1
            ? 'data_header w100 height_40 blue_back'
            : 'data_header w100 height_40 red_back'
        "
      >
        <image
          v-if="userType == 1"
          src="../../../../static/images/order_blue_icon.png"
          mode=""
          class="header_icon"
        ></image>
        <image
          v-else
          src="../../../../static/images/workbetch_icon.png"
          mode=""
          class="header_icon"
        ></image>
        <view class="fz_16 fb fc_333 ml_4"> 订单金额统计（元） </view>
      </view>
      <view class="data_content bc_fff">
        <view class="data_inner w100 height_60">
          <view class="single_data">
            <view class="fz_12 fc_999"> 已收金额 </view>
            <view class="fz_20 fc_333 fb mt_6 fc">
              {{ tradeData.amountReceived || 0 }}
              <view class="fc_999 fz_12 fc">
                ({{ tradeData.downPayment || 0 }}定金)
              </view>
              <!-- <text class="fc_999 fz_12">({{tradeData.downPayment || 0}}定金)</text> -->
            </view>
          </view>
          <view class="single_data center_box">
            <view class="fz_12 fc_999"> 未收金额 </view>
            <view class="fz_20 fc_333 fb mt_6">
              {{ tradeData.uncollectedAmount || 0 }}
            </view>
          </view>
          <view class="single_data">
            <view class="fz_12 fc_999"> 总销量 </view>
            <view class="fz_20 fc_333 fb mt_6">
              {{ tradeData.all || 0 }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="data_box box br_8 mt_12">
      <view
        :class="
          userType == 1
            ? 'data_header w100 height_40 blue_back'
            : 'data_header w100 height_40 red_back'
        "
      >
        <view class="fz_16 fb fc_333 ml_4"> 订单量统计（单） </view>
      </view>
      <view class="data_content bc_fff">
        <view class="data_inner w100 height_60">
          <view class="single_data">
            <view class="fz_12 fc_999"> 全款订单 </view>
            <view class="fz_20 fc_333 fb mt_6">
              {{ tradeData.fullOrder || 0 }}
            </view>
          </view>
          <view class="single_data center_box">
            <view class="fz_12 fc_999"> 定金订单 </view>
            <view class="fz_20 fc_333 fb mt_6">
              {{ tradeData.depositOrder || 0 }}
            </view>
          </view>
          <view class="single_data">
            <view class="fz_12 fc_999"> 订单数 </view>
            <view class="fz_20 fc_333 fb mt_6">
              {{ tradeData.totalOrders || 0 }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="data_box box br_8 mt_12">
      <view
        :class="
          userType == 1
            ? 'data_header w100 height_40 blue_back'
            : 'data_header w100 height_40 red_back'
        "
      >
        <view class="fz_16 fb fc_333 ml_4"> 业绩统计（元） </view>
      </view>
      <view class="data_content bc_fff">
        <view class="data_inner w100 height_60">
          <view class="single_data">
            <view class="fz_12 fc_999"> 尾款 </view>
            <view class="fz_20 fc_333 fb mt_6">
              {{ performanceData.recoveryOfBalance || 0 }}
            </view>
          </view>
          <view class="single_data center_box">
            <view class="fz_12 fc_999"> 退货 </view>
            <view class="fz_20 fc_333 fb mt_6">
              {{ performanceData.goodsRejected || 0 }}
            </view>
          </view>
          <view class="single_data">
            <view class="fz_12 fc_999"> 业绩 </view>
            <view class="fz_20 fc_333 fb mt_6">
              {{ performanceData.all || 0 }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import api from "@/service/config/api";
import DateType from "./DateType.vue";
export default {
  components: {
    DateType,
  },
  props: {
    ossUrl: {
      default: "",
      type: String,
    },
    userType: {
      default: 4,
      type: Number,
    },
    currentIndex: {
      default: 0,
      type: Number,
    },
  },
  data() {
    return {
      pickerValue: {
        type: 1,
        label: "今日",
        startTime: "",
        endTime: "",
      },
      // userType: 2, // 1.导购员 2.店长 3.经销商 4.普通用户
      orderData: {},
      tradeData: {},
      performanceData: {}, // 业绩统计
      timer: null,
    };
  },
  created() {
    if (this.userType != 4) {
      this.getTradeData(this.pickerValue);
      this.getOrderData();
      this.getPerformanceData(this.pickerValue);
      this.timer = setInterval(() => {
        this.getTradeData(this.pickerValue);
        this.getOrderData();
        this.getPerformanceData(this.pickerValue);
      }, 10000);
    }
  },
  destroyed() {
    clearInterval(this.timer);
  },
  methods: {
    updatePickerValue(value) {
      console.log("获取到的数据");
      console.log(value);
      if (value.type == 5) {
        if (
          value.startTime &&
          value.endTime &&
          (value.startTime != this.pickerValue.startTime ||
            value.endTime != this.pickerValue.endTime)
        ) {
          this.getTradeData(value);
          this.getPerformanceData(value);
        }
      } else if (value.type != this.pickerValue.type) {
        this.getTradeData(value);
        this.getPerformanceData(value);
      }
      this.pickerValue = value;
      // if (value.type != this.pickerValue.type) {
      // 	this.pickerValue = value
      // 	this.getTradeData()
      // }

      console.log(this.pickerValue);
    },
    // 跳转订单
    bindOrder(status) {
      // if (item.orderType === 'aftersale') {
      // 	uni.navigateTo({
      // 		url: '/pages/person/pages/aftersale_list'
      // 	})
      // } else {
      // 	uni.navigateTo({
      // 		url: '/pages/workbench/pages/order_list?type=work&type=' + item.orderType
      // 	})
      // }
      if (status == 0) {
        uni.navigateTo({
          url: "/pages/workbench/pages/order_list?listType=radar",
        });
      } else {
        if (status == 100) {
          uni.navigateTo({
            url: "/pages/person/pages/aftersale_list?origin=2",
          });
        } else {
          uni.navigateTo({
            url:
              "/pages/workbench/pages/order_list?listType=radar&type=" + status,
          });
        }
      }
      // uni.navigateTo({
      // 	url: `/pages/person/pages/order_list?status=${status}&type==2`
      // })
    },
    // 业绩统计
    getPerformanceData(value) {
      const params = {
        type: value.type,
        beginTime: value.startTime || "",
        endTime: value.endTime || "",
      };
      return new Promise((resolve) => {
        api
          .get("/order/api/tMyStaging/performanceTotal", params, {
            noHideLoading: true,
          })
          .then((res) => {
            this.performanceData = res.data;
            console.log("业绩桶酒");
            console.log(this.performanceData);
          })
          .finally(() => {
            resolve();
          });
      });
    },
    getTradeData(value) {
      console.log("请求数据");
      console.log(value);
      api
        .get("/order/api/tMyStaging/orderMoneyTotal", {
          type: value.type,
          beginTime: value.startTime,
          endTime: value.endTime,
        })
        .then((res) => {
          console.log(res);
          this.tradeData = res.data;
        });
      // api.post("/user/api/radar/tradeDataList", {
      // 	type: this.pickerValue.type,
      // 	beginTime: this.pickerValue.beginTime,
      // 	endTime: this.pickerValue.endTime
      // }).then(res => {
      // 	console.log(res)
      // 	this.tradeData = res.data
      // })
    },
    // getOrderData() {
    // 	api.post("/user/api/radar/orderDataList", {}).then(res => {
    // 		this.orderData = res.data
    // 	})
    // },
    getOrderData() {
      api
        .get(
          "/order/api/tMyStaging/orderNumTotal",
          {},
          {
            noHideLoading: true,
          }
        )
        .then((res) => {
          this.orderData = res.data;
          console.log("获取到的订单数据");
          console.log(this.orderData);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.order_box {
  background-color: #f6f6f6;
  padding: 0 16rpx 30rpx 16rpx;
  // @include set_padding(0rpx, 16rpx);

  .data_box {
    .data_header {
      @include flex_box(row, nowrap, flex-start, center);

      .header_icon {
        width: 36rpx;
        height: 36rpx;
        display: block;
        margin-left: 16rpx;
      }
    }

    .blue_back {
      background: linear-gradient(
        93deg,
        #e5f0ff 0%,
        rgba(199, 221, 255, 0) 100%
      );
    }

    .red_back {
      background: linear-gradient(
        93deg,
        #ffe2d8 0%,
        rgba(255, 225, 214, 0) 100%
      );
    }

    .back1 {
      background: linear-gradient(
        93deg,
        #e5f0ff 0%,
        rgba(199, 221, 255, 0) 100%
      );
    }

    .data_content {
      @include set_padding(12rpx, 0rpx);

      .data_inner {
        @include flex_box(row, nowrap, flex-start, center);

        .single_data {
          flex: 1;
          @include flex_box(column, nowrap, center, center);
        }

        .center_box {
          border-left: 1rpx dashed #999999;
          border-right: 1rpx dashed #999999;
        }
      }
    }
  }

  .all_box {
    .order_header {
      @include set_padding(0rpx, 12rpx);
      @include flex_box(row, nowrap, space-between, center);

      .header_left {
        color: #1d2129;
        @include flex_box(row, nowrap, flex-start, center);
      }

      .header_right {
        @include flex_box(row, nowrap, flex-end, center);
        color: #1d2129;
      }
    }

    .list_box {
      @include flex_box(row, wrap, flex-start, center);

      .single_list {
        @include set_padding(8rpx, 8rpx);
        background-color: #f5f7fb;

        .single_header {
          @include flex_box(row, nowrap, flex-start, center);
        }

        .blue_text {
          color: #1c76fe;
        }

        .red_text {
          color: #fe5a1c;
        }
      }
    }
  }

  .time_box {
    @include set_padding(0rpx, 16rpx) @include
      flex_box(row, nowrap, space-between, center);
  }
}
</style>
